<template>
	<view class="max-box">
		<view class="header">
			<view class="title">
				<image src="/static/logo.png" class="title-image" mode=""></image>
				<view class="title-name">
					<view class="title-username">嗨品软件-阿奇</view>
					<view class="title-member">会员ID:23997741</view>
				</view>
			</view>
			<view class="header-content">暂无简介~</view>
			<view class="heat">
				<view class="heat-left" v-for="(item,index) in heatData" :key="index">
					<view class="heat-number">{{ item.number }}</view>
					<view class="">{{ item.name }}</view>
				</view>
				<view class="heat-right">
					<view class="concern">
						<u-icon name="heart" color="#fff" size="28"></u-icon>
						<text>关注</text>
					</view>
					<u-icon name="share" color="#fff" size="28"></u-icon>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-title">
				<u-tabs :list="list4" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
				            color: 'red',
				            fontWeight: 'bold',
				            transform: 'scale(1.05)'
				        }" :inactiveStyle="{
				            color: '#606266',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" >
				</u-tabs>
			</view>
			<view class="content-main">
				<view class="main-opus" @click="opus">
					<image src="/static/logo.png" class="opus-image" mode=""></image>
					<view class="opus-name">生鲜团购小程序，在线团购</view>
					<view class="opus-content">
						<view class="opus-time">2024年03月01日</view>
						<view class="opus-support">
							<u-icon name="heart" size="28"></u-icon>
							<view class="">0</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 关注、粉丝、获赞数据
				heatData: [{
						number: 0,
						name: '关注'
					},
					{
						number: 0,
						name: '粉丝'
					},
					{
						number: 0,
						name: '获赞'
					},
				],
				// 作品、赞过数据
				list4: [{
					name: '作品'
				}, {
					name: '赞过',
				},],
			}
		},
		methods: {
			// 跳转作品详情页
			opus(){
				uni.navigateTo({
					url:'/pages/index/communityDetails/communityDetails'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title-image {
		width: 125rpx;
		height: 125rpx;
		border-radius: 100%;
	}

	.header {
		padding: 20rpx;
		background-color: #5A70F1;
		color: #fff;
	}

	.title {
		display: flex;
		align-items: center;
	}

	.title-name {
		margin-left: 20rpx;
	}

	.title-username {
		font-size: 45rpx;
		font-weight: bold;
	}

	.title-member {
		border: 1px solid #fff;
		padding: 5rpx 20rpx 5rpx 20rpx;
		border-radius: 40rpx;
		margin-top: 10rpx;
		margin-left: 0rpx;
	}
	
	.header-content{
		margin-top: 20rpx;
	}

	.heat {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 60rpx;
	}

	.heat-number {
		font-weight: bold;
	}

	.heat-right {
		display: flex;
		align-items: center;
	}

	.concern {
		display: flex;
		align-items: center;
		border-radius: 40rpx;
		padding: 5rpx 20rpx 5rpx 20rpx;
		background-color: #FF333B;
		margin-right: 20rpx;
	}
	.content-title{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.content-main{
		padding: 20rpx;
		background-color: #F6F6F6;
		height: 1000rpx;
	}
	.main-opus{
		width: 50%;
		background-color: #fff;
	}
	.opus-image{
		width: 100%;
		height: 500rpx;
	}
	.opus-name{
		font-size: 30rpx;
	}
	.opus-content{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.opus-time{
		color: #9D9D9D;
	}
	.opus-support{
		display: flex;
		align-items: center;
	}
</style>